import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import {reqcate,reqgood,reqcartadd} from "../../request/api"
import "./Cate.less"
import { Image, List,Toast  } from 'antd-mobile'
import {imgPre} from "../../request/http"
export default class Cate extends Component {
    constructor(){
        super();
        this.state={
            cate:[],
            activeKey:0,
            goods:[]
        }
    }
    componentDidMount(){
        reqcate().then(d=>{
            if(d.data.code === 200){
                this.setState({
                    cate:d.data.list
                })
            }
        })
        reqgood({fid:this.state.activeKey+1}).then(d=>{
            if(d.data.code === 200){
                this.setState({
                    goods:d.data.list
                })
            }
        })
    }
    setActiveKey=(n)=>{
        this.setState({
            activeKey:n
        })
        reqgood({fid:this.state.activeKey+1}).then(d=>{
            if(d.data.code === 200){
                this.setState({
                    goods:d.data.list
                })
            }
        })
    }
    cartadd(e,item){
        e.stopPropagation();
        let obj =sessionStorage.getItem("isLogin");
        let objp = JSON.parse(obj);
        reqcartadd({uid:objp.uid,type:1,goodsid:item.id,num:1}).then(d=>{
            Toast.show({content:d.data.msg})
        })
    }
    render() {
        const {cate,activeKey,goods} = this.state
        
        return (
            <div>
                <Header title="分类" back></Header>
                <div className="container">
                    <div className="side">
                            {cate.map((item,index) => ( 
                                <span key={item.id} onClick={()=>this.setActiveKey(index)} className={index===activeKey?"active":''}>{item.catename}</span>
                            ))}
                    </div>
                    <div className="main">
                        {
                            <List>
                            {goods.map(item => (
                                <List.Item
                                onClick={key=>{this.props.history.push("/Detail/"+item.id)}}
                                key={item.id}
                                prefix={
                                    <Image
                                    src={imgPre+item.img}
                                    fit='cover'
                                    width={80}
                                    height={80}
                                    />
                                }
                                description={item.description}
                                >
                                {item.goodsname}
                                <div>
                                    原价<del>{item.market_price}</del>
                                    &nbsp;&nbsp;&nbsp;
                                    <span>现价：{item.price}</span>
                                </div>
                                <button onClick={(e)=>{this.cartadd(e,item)}}>加入购物车</button>
                                </List.Item>
                            ))}
                        </List>
                        }
                    </div>
                </div>
            </div>
        )
    }
}
